<div class="example-container mat-elevation-z8">
    
      <md-table #table [dataSource]="dataSource">
    
        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->
    
        <!-- ID Column -->
        <ng-container cdkColumnDef="userId">
          <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
          <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
        </ng-container>
    
        <!-- Progress Column -->
        <ng-container cdkColumnDef="progress">
          <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
          <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
        </ng-container>
    
        <!-- Name Column -->
        <ng-container cdkColumnDef="userName">
          <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
          <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
        </ng-container>
    
        <!-- Color Column -->
        <ng-container cdkColumnDef="color">
          <md-header-cell *cdkHeaderCellDef> Color </md-header-cell>
          <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
        </ng-container>
    
        <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
      </md-table>
    
      <md-paginator #paginator
                    [length]="exampleDatabase.data.length"
                    [pageIndex]="0"
                    [pageSize]="25"
                    [pageSizeOptions]="[5, 10, 25, 100]">
      </md-paginator>
    </div>